<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>新增管理员信息</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/create_update.css" rel="stylesheet">

    <script>
        $(function () {
            //设置权限下拉框标签内容
            $.get("/employees/limitations", {}, function (data) {
                var limitations = data.data;

                let length = limitations.length;
                var option = "";
                for (let i = 0; i < length - 1; i++) {
                    option += '<option name="limitation" value="' + limitations[i] + '">' + limitations[i] + '</option>';
                }
                option += '<option name="limitation" selected value="' + limitations[length - 1] + '">' + limitations[length - 1] + '</option>';

                $("#limitation").html(option);
            })
        });
    </script>
</head>

<body>
<h1>新增管理员信息界面</h1>

<div class="main_body">
    <form id="mainForm">
        <div class="form-group">
            <label for="name">姓名:</label>
            <input class="form-control " id="name" name="name" placeholder="请输入员工姓名" type="text">
        </div>

        <div class="form-group">
            <label style="margin-right: 10px">性别:</label>

            <label class="radio-inline">
                <input checked id="inlineRadio1" name="sex" type="radio" value="男">男
            </label>
            <label class="radio-inline">
                <input id="inlineRadio2" name="sex" type="radio" value="女">女
            </label>
        </div>

        <div class="form-group">
            <label for="phone">手机号:</label>
            <input class="form-control" id="phone" name="phone" placeholder="请输入员工手机号" type="text">
        </div>

        <div class="form-group">
            <label for="job">工作岗位:</label>
            <input class="form-control" id="job" name="job" placeholder="请输入员工工作岗位" type="text">
        </div>

        <div class="form-group">
            <label for="limitation">权限:</label>
            <select class="bg-info text-center" id="limitation" name="limitation">
                <option name="limitation" value="1">1</option>
                <option name="limitation" value="2">2</option>
                <option name="limitation" selected value="3">3</option>
            </select>
        </div>

        <div class="form-group">
            <label for="password">密码:</label>
            <input class="form-control" id="password" name="password" placeholder="请输入员工密码" type="password">
        </div>

        <div class="text-center form-group">
            <button class="btn btn-default" onclick="resetForm()" style="margin-right: 10px" type="button">重置</button>
            <button class="btn btn-default" type="submit">确认</button>
        </div>
    </form>

    <div class="btn_return">
        <button class="btn btn-info" onclick="javascript:location.href ='index.html';">返回主页</button>
    </div>
</div>


<script>
    function resetForm() {
        var inputs = $("input");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].value = '';
        }

        let sex = $("input[name = 'sex']");
        sex[0].checked = true;
        sex[1].checked = false;

        let options = $("option[name = 'limitation']");
        options.prop("selected", false);
        options[options.length - 1].selected = true;
    }

    function confirmChanges() {
        //校验非空
        let name = $("#name");
        if (name.val() === "") {
            name.addClass("alert-danger")
            return false;
        }
        name.removeClass("alert-danger")
        name = name.val();

        var sex = $("input[name='sex']");
        if (sex[0].checked) {
            sex = "男";
        } else {
            sex = "女";
        }

        let phone = $("#phone");
        if (phone.val() === "") {
            phone.addClass("alert-danger")
            return false;
        }
        phone.removeClass("alert-danger")
        phone = phone.val();

        let job = $("#job");
        if (job.val() === "") {
            job.addClass("alert-danger")
            return false;
        }
        job.removeClass("alert-danger")
        job = job.val();

        var limitation = $("option[name = 'limitation']");
        for (var i = 0; i < limitation.length; i++) {
            if (limitation[i].selected) {
                limitation = limitation[i].value;
                break;
            }
        }

        let password = $("#password");
        if (password.val() === "") {
            password.addClass("alert-danger")
            return false;
        }
        password.removeClass("alert-danger")
        password = password.val();


        $.ajax({
            url: "/employees", // 请求路径
            type: "post", //请求方式
            data: JSON.stringify({password, name, sex, phone, job, limitation}),
            dataTypes: "json",
            headers: {'Content-Type': 'application/json',},
            success: function (data) {//响应成功后的回调函数
                if (data.code === 1) {
                    alert(data.data);
                    location.href = "index.html";
                } else {
                    alert(data.msg);
                }
            },
            error: function () {//请求响应出现错误会执行的回调函数
                alert("出错啦...")
            },
            dataType: "json"//设置接受到的响应数据的格式
        });

        return false;
    }

    $(function () {
        $("#mainForm").submit(function () {
            return confirmChanges();
        });
    });
</script>
</body>
</html>  